<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>加入我们</title>
    <!--vue-->
    <script src="/js/vue.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="/css/index.css">
    <!-- 引入组件库 -->
    <script src="/js/index.js"></script>
    <!--axios-->
    <script src="/js/axios.min.js"></script>
</head>
<style>
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }
    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }
</style>
<body>
<h1>加入我们</h1>
<div id="app">
    <el-row>
        <el-table
                :data="tableData"
                style="width: 100%">
            <el-table-column prop="id" label="ID" v-if="show"></el-table-column>
            <el-table-column prop="dname" label="部门"></el-table-column>
            <el-table-column prop="pname" label="职位"></el-table-column>
            <el-table-column prop="number" label="需要人数"></el-table-column>
            <el-table-column prop="requir" label="岗位要求"></el-table-column>
            <el-table-column prop="duty" label="岗位职责"></el-table-column>
            <el-table-column prop="treat" label="福利待遇"></el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button size="mini" @click="toEdit(scope.row.id,scope.row.dname,scope.row.pname)">申请</el-button>
                </template>
            </el-table-column>
        </el-table>
    </el-row>
    <el-row>
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[2,3,5,10,100, 200, 300, 400]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
        </el-pagination>
    </el-row>
    <!--模态框-->
    <el-row>
        <el-dialog title="申请填写" :visible.sync="editFormVisible">
            <el-form :model="form">
                <el-form-item v-if='show' label="招聘信息ID" :label-width="formLabelWidth">
                    <el-input v-model="form.id" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="申请人" :label-width="formLabelWidth">
                    <el-input v-model="form.ename" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="照片" :label-width="formLabelWidth">
                    <el-upload
                            class="avatar-uploader"
                            action="/commonOSS/upload"
                            name="file"
                            :auto-upload="true"
                            :show-file-list="false"
                            :on-success="handleAvatarSuccess"
                            :before-upload="beforeAvatarUpload">
                        <img v-if="imageUrl" :src="imageUrl" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>
                <el-form-item label="性别" :label-width="formLabelWidth">
                    <el-select v-model="form.sex" placeholder="请选择">
                        <el-option label="男" value="男"></el-option>
                        <el-option label="女" value="女"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="身份证号码" :label-width="formLabelWidth">
                    <el-input v-model="form.idcard" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="联系方式" :label-width="formLabelWidth">
                    <el-input v-model="form.phone" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="毕业院校" :label-width="formLabelWidth">
                    <el-input v-model="form.graduation" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="学历" :label-width="formLabelWidth">
                    <el-input v-model="form.education" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="申请职位" :label-width="formLabelWidth">
                    <el-input v-model="form.pname" :disabled="true" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="所属部门" :label-width="formLabelWidth">
                    <el-input v-model="form.dname" :disabled="true" autocomplete="off"></el-input>
                </el-form-item>
                <!--申请时间time-->
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="editFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="add()">确 定 申 请</el-button>
            </div>
        </el-dialog>
    </el-row>
</div>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            tableData:[],
            form:{id:'',pname:'',dname:''},
            currentPage:1,
            pageSize:5,
            total:20,
            editFormVisible:false,//模态框
            formLabelWidth:"120px",
            imageUrl:''//照片
        },
        created:function(){
            this.loadData();
        },
        methods:{
            loadData:function () {
                console.log("我进来了");
                //初始化数据
                axios.get('/recruit/getPage',{
                    params: {
                        pageNo:this.currentPage,
                        pageSize:this.pageSize
                    }
                }).then(function (response) {
                    //赋值分页列表
                    app.tableData = response.data.list;
                    //删除最后一页为空时，调到上一页
                    if(app.tableData.length==0&&app.currentPage!=1){
                        app.currentPage=app.currentPage-1;
                        this.loadData();
                    }
                    //赋值总条数
                    app.total = response.data.total;
                })
            },
            //每页数量发生变化时
            handleSizeChange:function (v) {
                app.pageSize=v;
                this.loadData();
            },
            //当前页数放生变化是
            handleCurrentChange:function (v) {
                app.currentPage=v;
                this.loadData();
            },
            //打开模态框
            toEdit:function (id,dname,pname) {
                app.form={};
                app.form.id=id;
                app.form.dname=dname;
                app.form.pname=pname;
                app.editFormVisible=true;
            },
            //成功上传处理
            handleAvatarSuccess(res, file) {
                this.imageUrl = URL.createObjectURL(file.raw);
                //alert(file.response);
                //alert(JSON.stringify(file.response));
                this.imageUrl=file.response.ossFileUrlBoot;
                this.form.filepath=file.response.ossFileUrlBoot;
                // this.form.fileName=file.response.oldFileName;
                // this.form.filePath=file.response.newFilePath;
            },
            //上传前的处理（判断图片大小）
            beforeAvatarUpload(file) {
                // const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 2;
                /*  if (!isJPG) {
                      this.$message.error('上传头像图片只能是 JPG 格式!');
                  }*/
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isLt2M;
            },
            add:function () {//提交申请
                axios.post('/recruit/addRecruit',app.form).then(function (response) {
                    if(response.data == 1){
                        //提示成功
                        app.$message({
                            message: '恭喜你，提交申请成功',
                            type: 'success'
                        });
                        //关闭弹出框
                        app.editFormVisible=false;
                        //重新加载数据
                        this.loadData();
                    }
                })
            }
        }
    });
</script>
</body>
</html>